<template>
  <div>
    <div class="app-container">
      <el-form ref="postForm" :model="postForm" :label-position="'right'" label-width="80px" :inline="true">
        <el-form-item>
          <el-button type="warning" size="small" @click="addInfo">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" stripe border width="100%">
        <el-table-column prop="packageName" label="包名" width="150" />
        <el-table-column prop="deviceInfo" label="设备" width="150" />
        <el-table-column prop="version" label="版本" />
        <el-table-column prop="down" label="下载地址">
          <template slot-scope="scope">
            {{ fileUrl+scope.row.down }}
          </template>
        </el-table-column>
        <el-table-column prop="putawayState" label="是否上架" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.putawayState=='EFFECTIVE'">是</el-tag>
            <el-tag v-if="scope.row.putawayState=='INVALID'" type="danger">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="coerceUp" label="强制更新" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.coerceUp=='EFFECTIVE'">是</el-tag>
            <el-tag v-if="scope.row.coerceUp=='INVALID'" type="danger">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="!noCreated" fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="editInfo(scope.$index,scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="delInfo(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog :title="title" :visible.sync="centerDialogVisible" center width="70%">
      <el-form ref="infoForm" :rules="rules" :model="info" label-position="right" label-width="100px">
        <el-form-item label="版本号:" prop="version">
          <el-input v-model="info.version" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="包名:" prop="packageName">
          <el-input v-model="info.packageName" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="更新说明:" prop="updateText">
          <el-input v-model="info.updateText" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="设备:" prop="deviceInfo">
          <el-select v-model="info.deviceInfo" placeholder="请选择">
            <el-option key="IOS" label="IOS" value="IOS" />
            <el-option key="ANDROID" label="ANDROID" value="ANDROID" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否上架:" prop="putawayState">
          <el-select v-model="info.putawayState" placeholder="请选择">
            <el-option key="EFFECTIVE" label="是" value="EFFECTIVE" />
            <el-option key="INVALID" label="否" value="INVALID" />
          </el-select>
        </el-form-item>
        <el-form-item label="强制更新:" prop="coerceUp">
          <el-select v-model="info.coerceUp" placeholder="请选择">
            <el-option key="EFFECTIVE" label="是" value="EFFECTIVE" />
            <el-option key="INVALID" label="否" value="INVALID" />
          </el-select>
        </el-form-item>
        <el-form-item label="安装包:" prop="down">
          <fileUpdate v-model="info.down" :file-key="info.id" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { addOrEdit, getInfo, delInfo, page } from '@/api/system/appUpdate'
  import fileUpdate from '@/components/Upload/fileUpdate'

  export default {
    components: {
      fileUpdate
    },
    props: ['noCreated'],
    data() {
      return {
        qiniuDataObj: { token: '' },
        fileUrl: process.env.VUE_APP__FILE_URL,
        // 总条数
        total: 0,
        // 每页显示个数
        pageSize: 15,
        // 页码
        currentPage: 1,
        // 查询条件
        postForm: {},
        // 查询条件
        selectForm: {},
        info: {},
        // 列表数据
        tableData: [],
        // 编辑下标
        editIndex: 0,
        // 是否展示表单
        centerDialogVisible: false,
        dialogVisible: false,
        dialogImageUrl: null,
        userId: null,
        // 表单标题
        title: null,
        // 省
        province: [],
        // 市
        city: [],
        // 区
        district: [],
        // 分类选项
        newsTypes: [],
        // 系统用户
        sysAccount: [],
        rules: {
          version: [{ required: true, message: '请输入内容', trigger: 'chang' }],
          putawayState: [{ required: true, message: '请选择选项', trigger: 'chang' }],
          coerceUp: [{ required: true, message: '请选择选项', trigger: 'chang' }],
          updateText: [{ required: true, message: '请选择选项', trigger: 'chang' }],
          packageName: [{ required: true, message: '请选择选项', trigger: 'chang' }]
        }
      }
    },
    created() {
      if (!this.noCreated) {
        this.getData()
      }
    },
    methods: {
      // 初始化
      init(userId) {
        this.postForm = {}
        this.postForm.userId = userId
        this.selectForm = this.postForm
        this.currentPage = 1
        this.getData()
      },
      // 新增
      addInfo() {
        this.title = '新增资讯'
        this.info = {}
        this.centerDialogVisible = true
        if (this.$refs[ 'infoForm' ] != null) {
          this.$refs[ 'infoForm' ].resetFields()
        }
      },
      // 编辑
      editInfo(index, row) {
        this.editIndex = index
        this.title = '编辑分类'
        this.info = {}
        this.centerDialogVisible = true
        if (this.$refs[ 'infoForm' ] != null) {
          this.$refs[ 'infoForm' ].resetFields()
        }
        getInfo(row.id).then(response => {
          this.info = response.data
        })
      },
      addOrEdit: function() {
        this.$refs[ 'infoForm' ].validate((valid) => {
          if (valid) {
            if (this.info.type === '1') {
              this.info.regionId = this.info.district
            } else if (this.info.type === '3') {
              this.info.regionId = this.info.city
            }
            addOrEdit(this.info.id, this.info.deviceInfo, this.info.version, this.info.down, this.info.putawayState, this.info.coerceUp, this.info.updateText, this.info.packageName).then(response => {
              this.centerDialogVisible = false
              if (this.info.id == null) {
                // 新增
                this.getData()
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                // 编辑
                this.tableData.splice(this.editIndex, 1, response.data)
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      // 删除
      delInfo(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delInfo(row.id).then(response => {
            this.tableData.splice(index, 1)
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      // 分页查询
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      // 查询条件
      query() {
        this.selectForm = this.postForm
        this.currentPage = 1
        this.getData()
      },
      getData() {
        // 请求分页参数
        page(this.pageSize, this.currentPage, this.selectForm.title).then(response => {
          this.total = response.count
          this.tableData = response.data
        })
      }
    }
  }
</script>

